<template>
  <div>
    <h1>Add Book Form</h1>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="书名">
        <el-input v-model="form.bookName"></el-input>
      </el-form-item>
      <el-form-item label="作者名">
        <el-input v-model="form.author"></el-input>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.publicationDate"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="post">立即创建</el-button>
        <el-button type="danger" @click="clean">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return { form: {} };
  },
  methods: {
    post() {
      let doublePrice = parseFloat(this.form.price); //Todo: 未做parse err处理
      console.log(this.form);
      axios
        .post("/api/book", {
          id: -1,
          bookName: this.form.bookName,
          author: this.form.author,
          publicationDate: this.form.publicationDate,
          price: doublePrice,
        })
        .then((res) => {
          if (res.status == 200) {
            this.$message({
              message: "书本添加成功",
              type: "success",
            });
          } else {
            this.$message.error("操作失败");
          }
        })
        .catch((e) => {
          console.log(e)
          this.$message.error("操作失败");
        });
    },
    clean() {
      this.form = {};
    },
  },
};
</script>


<style scoped>
</style>
